<template>
  <div class="history-container">
    <div class="statistics">
      <div>
        <h3>已兑换积分数</h3>
        <p>{{ info.total_give_point || 0 }}</p>
      </div>
      <div>
        <h3>已兑出余额</h3>
        <p>{{ info.total_face_add_balance || 0 }}</p>
      </div>
      <div>
        <h3>兑换手续费</h3>
        <p>{{ info.total_handling_fee || 0 }}</p>
      </div>
      <div class="give">
        <div>
          <h3>平台可转赠积分数</h3>
          <p>{{ info.total_can_give_point || 0 }}</p>
        </div>
        <el-button type="success" class="give-btn" @click="givePoint"
          >积分转赠</el-button
        >
        <el-button type="text" class="give-btn" @click="givePointDetail"
          >转赠明细</el-button
        >
      </div>
    </div>
    <el-form ref="formRef" :model="pamars" inline>
      <el-form-item label="兑换人手机号" prop="mobile">
        <el-input v-model="pamars.mobile" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="兑换时间">
        <el-date-picker
          v-model="timer"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          type="datetimerange"
          range-separator="-"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          @change="timerChange"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="getDataList()">查询</el-button>
        <el-button type="warning" @click="resetPamars()">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" row-key="Id" border stripe style="width: 100%">
      <el-table-column type="index" align="center" width="80px" label="序号">
      </el-table-column>
      <el-table-column prop="real_name" align="center" label="兑换人">
        <template slot-scope="scope">
          <div>{{ scope.row.real_name }}({{ scope.row.mobile }})</div>
        </template>
      </el-table-column>
      <el-table-column prop="give_point" align="center" label="兑换积分数">
      </el-table-column>
      <el-table-column
        prop="face_add_balance"
        align="center"
        label="兑换获取金额（元）"
      >
      </el-table-column>
      <el-table-column
        prop="handling_fee"
        align="center"
        label="兑换手续费（积分）"
      >
      </el-table-column>
      <el-table-column prop="create_time" align="center" label="兑换时间">
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pamars.page"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pamars.limit"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>
    <el-dialog
      title="积分转赠"
      :visible.sync="dialogVisible"
      width="30%"
      center
      :show-close="false"
      :close-on-click-modal="false"
    >
      <div>
        <el-form
          ref="pointFormRef"
          :model="pointForm"
          :rules="pointFormRules"
          inline
          label-width="150px"
        >
          <el-form-item label="转赠接收人手机号" prop="mobile">
            <el-input
              v-model.number="pointForm.mobile"
              @change="mobileChange"
              clearable
              maxlength="11"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="转赠人姓名" prop="give_name">
            <el-input
              v-model="pointForm.give_name"
              disabled
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="转赠积分数" prop="give_point">
            <!-- <el-input
              v-model="pointForm.mobile"
              placeholder="请输入,转赠金额小于等于可转赠金额"
            ></el-input> -->
            <el-input-number
              v-model="pointForm.give_point"
              :min="0"
              :max="info.total_can_give_point"
              :step="0.00000001"
              :precision="8"
              label="请输入,转赠金额小于等于可转赠金额"
            ></el-input-number>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitPoint">确认转赠</el-button>
        <el-button @click="closeDialog">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import seviceApi from '@/api/serviceApi.js'
import { isMobile } from '@/utils/validate'
export default {
  data() {
    var validateMobile = (rule, value, callback) => {
      if (!isMobile(value)) {
        callback(new Error('手机号格式错误'))
      } else {
        callback()
      }
    }
    return {
      timer: null,
      info: {},
      pamars: {
        page: 1,
        limit: 10,
        start_time: null,
        end_time: null
      },
      tableData: [],
      totalPage: 0,
      dialogVisible: false,
      pointForm: {},
      pointFormRules: {
        mobile: [
          {
            required: true,
            message: '转赠接收人手机号不能为空',
            trigger: 'blur'
          },
          {
            validator: validateMobile,
            trigger: 'blur'
          }
        ],
        // give_name: [
        //   { required: true, message: '转赠人姓名不能为空', trigger: 'blur' }
        // ],
        give_point: [
          { required: true, message: '转赠积分数不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getList()
    this.getInfo()
  },
  methods: {
    getList() {
      seviceApi.getIntegralExchangeList(this.pamars).then(res => {
        if (res && res.data.code == 200) {
          this.tableData = res.data.page.list
          this.totalPage = res.data.page.totalCount
        }
      })
    },
    getInfo() {
      seviceApi.getStatistics().then(res => {
        if (res && res.data.code === 200) {
          this.info = res.data.data
        }
      })
    },
    timerChange(e) {
      console.log(e)
      if (e) {
        this.pamars.start_time = e[0]
        this.pamars.end_time = e[1]
      } else {
        this.pamars.start_time = null
        this.pamars.end_time = null
      }
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pamars.limit = val
      this.getList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pamars.page = val
      this.getList()
    },
    // 查询
    getDataList() {
      this.pamars.page = 1
      this.getList()
    },
    resetPamars() {
      this.timer = null
      this.pamars.start_time = null
      this.pamars.end_time = null
      this.$refs.formRef.resetFields()
      this.getDataList()
    },
    givePoint() {
      this.dialogVisible = true
      this.pointForm = {}
    },
    givePointDetail() {
      this.$router.push({
        path: '/integral-ptRegift'
        // query: {
        //   isBack: 1
        // }
      })
    },
    mobileChange(e) {
      if (e) {
        seviceApi
          .getMobileToName(e)
          .then(res => {
            if (res && res.data.code == 200) {
              this.pointForm.give_name = res.data.data
              this.$forceUpdate()
            }
          })
          .catch(err => {
            this.$message.error('服务端异常')
          })
      } else {
        this.pointForm.give_name = ''
      }
    },
    submitPoint() {
      this.$refs.pointFormRef.validate(valid => {
        if (valid) {
          seviceApi
            .submitRegif({
              mobile: this.pointForm.mobile,
              give_point: this.pointForm.give_point
            })
            .then(res => {
              if (res && res.data.code == 200) {
                this.getInfo()
                this.dialogVisible = false
              }
            })
            .catch(err => {
              this.$message.error('服务端异常')
            })
        } else {
          return false
        }
      })
    },
    closeDialog() {
      this.$refs.pointFormRef.resetFields()
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.history-container {
  .statistics {
    display: flex;
    margin-bottom: 20px;

    & > div {
      margin-right: 200px;

      &:last-child {
        margin-right: 0;
      }

      p {
        text-align: center;
      }
    }

    .give {
      display: flex;
      align-items: center;

      .give-btn {
        height: 40px;
        margin-left: 20px;
      }
    }
  }
  /deep/ .el-dialog {
    .el-form {
      color: red;
      .el-form-item {
        width: 100%;
        display: flex;
      }
      .el-form-item__content {
        flex: 1;
        .el-input-number--medium {
          width: 100%;
          // .el-input--medium {
          //   .el-input__inner {
          //     text-align: left !important;
          //   }
          // }
        }
      }
    }
  }
}
</style>
